<template>
	<view class="bg">
		 <view class="lunbo">
		        <view class="lunbo1">
		            <view :class="{banner:true,trans:flag}"  @mouseenter="enter" @mouseleave="leave">
		                <img  :src="imagesUrl[imgindex]" alt="" class="img" style="height: 500rpx;">
		            </view>
		            <view class="ul">  
		                <view class="li" v-for='(item,index) in 3' @click='select(index)'></view>
		             <!-- 点击小圆点切换对应图片展示 -->
		            </view>
		            <button @click="prev" class="prev"><</button>
		            <button @click="next" class="next">></button>
		        </view>
		    </view>
			<view class="me">
				<view class="text1">您好，欢迎加入我们</view>
				<view class="text2">尊敬的用户 {{username}}</view>
				<view class="bt">
					<view class="bt1">
						<view @click="gotoqueue">
						<image src="../../static/queue.png" style="height: 150rpx;width: 150rpx;"></image>
						<view class="text">排队</view>
						</view>
					</view>
					<view class="bt1">
						<view @click="gotoreserve">
						<image src="../../static/reserve.png" style="height: 150rpx;width: 150rpx;"></image>
						<view class="text">预约</view>
						</view>
					</view>
					<view class="bt1">
						<view @click="gotoorder">
						<image src="../../static/order2.png" style="height: 150rpx;width: 150rpx;"></image>
						<view class="text">点餐</view>
						</view>
					</view>
				</view>
				<view class="tj">
					<view class="tuijian">
						<image class="thumb" src="../../static/thumb.png" style="height: 80rpx;width: 80rpx;"></image>
						<view class="text3" style="font-weight: bold;">为您推荐</view>
					</view>
					<view class="ad">
						<image src="../../static/ad1.png"style="height: 350rpx;width: 350rpx;"></image>
						<image src="../../static/ad2.png"style="height: 350rpx;width: 350rpx;"></image>
					</view>
				</view>
			</view>
			
	</view>
</template>

<script>	
	export default{
		data() {
			return {
				imgindex:'0',//控制变量，默认显示第一张
				imagesUrl:["static/logo.png","static/ad6.png","static/ad.png"],
				flag:true,
				timer:null,//定时器
				username:''
			};
		},
		methods:{
		       //下一张
		      next:function(){
		          if(this.imgindex==this.imagesUrl.length-1){
		              this.imgindex=0;
		          }else{
		              this.imgindex++;
		          }
		      },
		      //上一张
		      prev:function(){
		          if(this.imgindex<0){
		              this.imgindex=this.imagesUrl.length-1
		          }else{
		              this.imgindex--
		          }
		      },
			  select(index){
			              this.imgindex=index;
			        //通过点击小圆点获取对应的索引，进行赋值；
			  },
			gotoqueue(){
				uni.navigateTo({
					url:'./queue'
				})
			},
			gotoreserve(){
				uni.navigateTo({
					url:'./reserve'
				})
			},
			gotoorder(){
				uni.navigateTo({
					url:'./order'
				})
			}
		  },
		  onShow() {
			this.username = uni.getStorageSync('username');
		  }
}
</script>

<style lang="scss">
			.bg{
				width: 100vw;
				height: 100%;
				background-color:#f3f3f3;
			}
			.lunbo{
				display: flex;
				margin:0rpx auto 0rpx;/*居中对齐*/
			}
	        .img{
	            width: 100%;
	        }
	        .banner{
	            overflow: hidden;
	        }
	        .trans{
	            transition:all .5s
	        }
	        .lunbo1{
				background-color: #C0C0C0;
	            width: 100%;
	            height: 400rpx;
	            // border:5px solid orangered;
	            // overflow: hidden;
	            position: relative;
	        }
	        .ul{
	            width: 100%;
	            height: 50rpx;
	            // border:5px solid black;
				position: absolute;
				top: 95%;
				left: 47%;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
	        }
	        .ul .li{
	            width: 20rpx;
	            height: 20rpx;
				// padding: 10rpx;
	            // border:3px solid red;
	            list-style: none;
	            border-radius: 50%;
	            float: left;
	            background: #ffffff;
	        }
	        .prev{
			 background-color: unset;	
			 color:white;
	         position: absolute;
	         top: 50%;
	         left: 0;   
	        }
	        .next{
			 background-color: unset;
			 color: white;
	         position: absolute;
			 border: none;
	         top: 50%;
	         right: 0;   
	        }
			.me{
				margin-top: 80rpx;
				border-radius: 40rpx;
				box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
				box-sizing: border-box;
				border:3px solid #ffaa00;
				overflow: hidden;
				height: 100%;
			.text1{
				margin-top: 30rpx;
				margin-left: 20rpx;
				color: #999999;
			}
			.text2{
				margin-top: 10rpx;
				margin-left: 50rpx;
			}
			.bt{
				// border-radius: 10rpx;
				// box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
				// box-sizing: border-box;
				display: flex;
				// border: 1px solid #ffaa00;
				justify-content: space-evenly;
				.bt1{
					// border: 1px solid #dcdcdc;
					border-radius: 10rpx;
					box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
					box-sizing: border-box;
					flex-direction: column;
					padding: 10rpx;
					// margin-top: 10rpx;
					margin-left: 10rpx;
				}
				.text{
					text-align: center;
				}
			}
			
			.tj{
					// border: 5px solid #000000;
					// background-color:#007AFF;
					display: flex;
					justify-content: space-evenly;
					flex-direction: column;
					align-items: center;
				
				.ad{
					width: 100%;
					display: flex;
					// border: 1px solid #aaff00;
					justify-content: space-evenly;
					flex-direction: row;
					padding: 50rpx;
				}
			}
			.tuijian{
				// border-radius: 40rpx;
				box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
				box-sizing: border-box;
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				.thumb{
					// border: 1px solid #aaff00;
					// display: flex;
					// flex-direction: row;
				}
			}
			
		}
</style>
